<template>
  <div class="flex justify-between text-[#000] text-xl pb-10">
    <div
      class="flex items-center cursor-pointer"
      @click="emits('handleReturn')"
    >
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <p class="pl-2">{{ $t("创建账号") }}</p>
    </div>
  </div>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      status-icon
      :rules="rules"
      label-position="top"
    >
      <el-form-item :prop="activeName == 'email' ? 'email' : 'mobile'">
        <template #label>
          <el-tabs
            class="custom-tabs form-tabs"
            v-model="activeName"
            @tab-change="handelClick"
          >
            <el-tab-pane :label="$t('邮箱')" name="email"></el-tab-pane>
            <el-tab-pane :label="$t('手机号码')" name="mobile"></el-tab-pane>
          </el-tabs>
        </template>
        <el-input
          v-model="form.email"
          size="large"
          :placeholder="$t('请输入邮箱')"
          v-if="activeName == 'email'"
        >
        </el-input>
        <el-input
          v-model="form.mobile"
          size="large"
          :placeholder="$t('请输入手机号码')"
          @input="handleInput"
          v-else
        >
          <template #prepend>
            <el-select
              v-model="form.mobile_area_code"
              :placeholder="$t('区号')"
              size="large"
              style="width: 100px"
              popper-class="custom-selectDropDown"
            >
              <el-option
                v-for="item in options"
                :key="item.area_code"
                :label="item.label"
                :value="item.area_code"
              >
                <span>{{ item.country }}</span>
                <span>{{ item.area_code }}</span>
              </el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" :label="$t('设置密码')">
        <el-input
          type="password"
          v-model="form.password"
          show-password
          size="large"
          class="mt-2"
          :placeholder="$t('请输入密码')"
        >
        </el-input>
      </el-form-item>
      <!-- <p class="text-xs text-[#AAAAAA] mb-2">
        {{ $t("密码最少6位，可使用字母和数字") }}
      </p> -->
      <el-form-item prop="confirm_password" :label="$t('确认密码')">
        <el-input
          type="password"
          v-model="form.confirm_password"
          show-password
          size="large"
          class="mt-2"
          :placeholder="$t('请再次输入密码')"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="invite_code" :label="$t('邀请码')">
        <el-input
          v-model="form.invite_code"
          size="large"
          class="mt-2"
          :placeholder="$t('请输入邀请码')"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-button
      size="large"
      type="primary"
      class="w-full mt-2"
      :loading="loading"
      @click="onSubmit"
    >
      {{ $t("提交") }}
    </el-button>
  </div>
</template>
<script setup>
const emits = defineEmits(["handleReturn"]);
import { reactive, ref, computed, nextTick } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

import { getCountryArea, registerApi } from "@/api/login/index";
import { ElMessage } from "element-plus";

const loading = ref(false);
const formRef = ref();

const activeName = ref("email");
const handleInput = (value) => {
  if (value.length > 16) {
    form.mobile = value.slice(0, 16);
  } else {
    form.mobile = value;
  }
};
const options = ref([]);
const getAreaList = async () => {
  const res = await getCountryArea();
  options.value = res || [];
  form.mobile_area_code = res[0].area_code || "";
};
getAreaList();

const validatePass2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error(t("请再次输入新密码")));
  } else if (value !== form.password) {
    callback(new Error(t("两次密码不一致")));
  } else {
    callback();
  }
};
const checkPwd = (rule, value, callback) => {
  if (!value) {
    callback(new Error(t("请设置新密码")));
  } else {
    const checkPwdFormat = new RegExp(/^[0-9a-zA-Z]{6,16}$/);
    if (!checkPwdFormat.test(value)) {
      callback(new Error(t("密码最少6位，可使用字母和数字")));
      return;
    }
    callback();
  }
};

// 校验
const rules = computed(() => {
  return {
    email: [{ required: true, message: t("请输入邮箱"), trigger: "blur" }],
    mobile: [
      { required: true, message: t("请输入手机号码"), trigger: "blur" },
      { min: 6, max: 16, message: t("请输入6-16位的数字"), trigger: "blur" },
    ],
    password: [{ required: true, validator: checkPwd, trigger: "blur" }],
    code: [{ required: true, message: t("请输入验证码"), trigger: "blur" }],
    confirm_password: [
      { required: true, validator: validatePass2, trigger: "blur" },
    ],
  };
});

const form = reactive({
  email: "",
  mobile: "",
  mobile_area_code: "",
  password: "",
  confirm_password: "",
  invite_code: "",
});
const handelClick = () => {
  nextTick(() => {
    formRef.value.resetFields();
  });
};
//提交
const onSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      try {
        loading.value = true;
        // 1.调用注册接口
        form.account_type = activeName.value;
        const res = await registerApi(form);
        ElMessage({
          message: t("创建成功"),
          type: "success",
        });
        emits("handleReturn");
      } catch (error) {
        loading.value = false;
      }
    })
    .catch((error) => {
      // console.log(error);
    });
};
</script>
